<template>
  <div class="header">
    <!-- 照片墙 -->
    <div class="bg" :style="{ 'background-image': `url('${userBg}')` }">

    </div>
  </div>
  <div class="box">
    <div class="avator">
      <van-image width="2.5rem" height="2.5rem" round fit="cover" :src="avatorImg" />
    </div>

    <div class="info-box">
      <div class="info-list" v-if="isLogin">
        <h3>{{ userInfo.nickname }}</h3>
        <van-button @click="getUser" :loading="detailLoading">获取用户信息</van-button>
        <van-button @click="loginOut" :loading="logOutLoading">退出登录</van-button>
      </div>

      <div class="login-box" v-else>
        <van-button :to="'/login'">登录</van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, onMounted } from 'vue'
import { userDetail, logOut, userPlaylist } from '@/request/api/api'
import { storeToRefs } from 'pinia'
import { userStore } from '@/store/user'
import { Toast, Dialog } from 'vant'

const $userStore = userStore();


// 数据
let data = reactive({
  avatorImg: '',
  userBg: '',
  isLogin: false,
})

let { avatorImg, userBg, isLogin } = toRefs(data);

onMounted(() => {
  initData();
})

// 初始化数据
let { userInfo, token } = storeToRefs($userStore);
const initData = () => {
  if (!token.value) {
    avatorImg.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg';
    userBg.value = '/src/assets/images/photo-bg.png'
    console.log('未登录');
  } else {
    avatorImg.value = userInfo.value.avatarUrl;
    userBg.value = userInfo.value.backgroundUrl;
    isLogin.value = true;
    console.log('已登录');
    // getSubcount()
  }
}

// 获取用户信息
let detailLoading = ref(false);
const getUser = () => {
  detailLoading.value = true;
  userDetail({ uid: userInfo.value.userId }).then((data) => {
    detailLoading.value = false
    console.log(data);
  }).catch(err => {
    detailLoading.value = false
    console.log(err);
    Toast.fail(err.message)
  })
}

// 获取歌单、收藏等
const getSubcount = () => {
  userPlaylist({ uid: userInfo.value.userId }).then(data => {
    console.log(data);
  })
}

// 退出登录
let logOutLoading = ref(false);
const loginOut = () => {
  Dialog.confirm({
    title: '标题',
    message: '确定要退出吗',
  }).then(() => {
    $userStore.$patch(state => {
      state.token = '';
      state.userInfo = [];
    });

    Toast.success('退出成功');
    isLogin.value = false;
    initData();
  })
}

</script>
  
<style lang='less' scoped>
.bg {
  width: 100%;
  height: 500px;
  // background: url('@/assets/images/photo-bg.png') no-repeat center;
  // background-image: url('~@/assets/images/photo-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  img {
    max-width: 100%;
  }
}

.box {
  width: 90%;
  background: #FFF;
  margin: 0 auto;
  margin-top: -30px;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .avator {
    transform: translate(0, -50%);
  }

  .info-box {
    width: 100%;
    text-align: center;
    transform: translate(0, -100px);
  }


}
</style>